브라우저가 폰트를 적용하는 과정

❓질문

브라우저가 폰트를 적용하는 과정을 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

css를 파싱하면서 내려다가 @font-face에 들어가있는 정보대로 로컬이나 혹은 네트워크 통신으로 폰트에 대한 정보를 받습니다.

🏫 정리한 내용

먼저, 사용자가 웹 페이지를 요청하면 HTML 문서가 브라우저로 전송됩니다. 브라우저는 이를 파싱하면서 CSS 파일을 로드하고, CSS 내에 @font-face가 있는지를 확인합니다. 이 @font-face를 통해 브라우저는 폰트 파일의 위치와 스타일을 파악하게 됩니다.

다음으로, 브라우저는 @font-face에 명시된 정보에 따라 폰트를 로컬 시스템에서 가져오거나 네트워크 요청을 통해 불러옵니다. 이때, 폰트는 일반적으로 woff나 woff2 같은 형식을 사용합니다. 이 형식이 용량이 작고 압축률이 높아 웹에서 널리 사용됩니다.

폰트가 로드되기 이전에 텍스트가 어떻게 렌더링될지는 CSS 속성 설정에 따라 달라집니다. 만약 font-display 속성이 swap으로 설정되어 있다면, fallback 폰트가 먼저 적용되었다가 폰트가 로드된 후 교체됩니다. 이때 텍스트의 형태가 순간적으로 변하는 "FOUT 현상"이 발생할 수 있습니다. 반면, block으로 설정되어 있다면 웹 폰트가 완전히 로드될 때까지 텍스트가 보이지 않습니다. 이로 인해 폰트가 순간적으로 보이지 않았다가 등장하며 깜빡이는 "FOIT 현상"이 발생할 수 있습니다.